<!-- Keyspace selector -->
<p-dropdown id="keyspace" (onChange)="handleKeyspaceChange($event)" [options]="keyspaces" [(ngModel)]="selectedKeyspace"></p-dropdown>

<!-- Cell selector -->
<p-dropdown id="cell" (onChange)="handleCellChange($event)" [options]="cells" [(ngModel)]="selectedCell"></p-dropdown>

<!-- Type selector -->
<p-dropdown id="type" (onChange)="handleTypeChange($event)" [options]="tabletTypes" [(ngModel)]="selectedType"></p-dropdown>

<!-- Metric selector -->
<p-dropdown id="metric" (onChange)="handleMetricChange($event)" [options]="metrics" [(ngModel)]="selectedMetric"></p-dropdown>

<!-- Wait until the heatmap data has been obtained from the service -->
<div *ngFor="let keyspace of listOfKeyspaces" class="heatmaps">
  <vt-heatmap *ngIf="heatmapDataReady"
    [heatmap]="mapOfKeyspaces[keyspace]"
    [name]="keyspace"
    [metric]="selectedMetric"
  >
  </vt-heatmap>
</div>
